<template>
  <div style="height:100%;width:100%;">
    <div style="height:100%;width:100%;" ref="echartsCanvas"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    echartsObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    echartsObj: {
      handler: function (val, oldVal) {
        if (JSON.stringify(val) != JSON.stringify(oldVal)) {
          this.init(val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  // mounted() {
  //   this.init();
  // },
  methods: {
    init(val) {
      this.$nextTick(() => {
        var myChart = this.$echarts.init(this.$refs.echartsCanvas);

        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            formatter: "{b} <br /> {a0}: {c0}" + "<br />{a1}: {c1} " + "%",
          },

          legend: {
            data: ["收入", "完成率"],
            // bottom: '20px',
          },
          grid: {
            left: "60px",
            right: "20px",
            bottom: "30px",
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              interval: 0,
              // rotate:40 ,
            },
            data: val.xdata,
          },
          yAxis: [
            {
              type: "value",
              // min: (minData-(minData+maxData1)%2)*2.2,
              // // max: 100,
              // interval: 50,
              splitLine: { show: false }, //去除网格线
              axisLabel: {
                formatter: "{value} %",
                show: false,
              },
              splitArea: {
                show: false,
                // areaStyle: {
                //   color: "#fff",
                // },
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },
              axisLine: {
                //y轴
                show: false,
              },
            },
            {
              type: "value",
              // min: 0,
              splitLine: { show: false }, //去除网格线
              // max: maxData*2,
              // // interval: 50,
              axisLabel: {
                formatter: "{value} %",
                show: false,
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },
              axisLine: {
                //y轴
                show: false,
              },
            },
          ],

          series: [
            {
              type: "bar",
              name: "收入",
              data: val.barData,
              barWidth: 20,
              color: ["#0070c0"],
              itemStyle: {
                normal: {
                  // color: function (params) {
                  //   var c = "";
                  //   var index = val.xAxis.indexOf("浙江");
                  //   if (params.dataIndex != index) {
                  //     c = "#0070c0";
                  //   } else {
                  //     c = "#c00000";
                  //   }
                  //   return c;
                  // },
                  label: {
                    show: false,
                    position: "top",
                    textStyle: {
                      color: "#0070c0",
                    },
                    // formatter: "{c}%",
                  },
                },
              },
            },
            {
              type: "line",
              name: "完成率",
              smooth: true,
              yAxisIndex: 1,
              data: val.lineData,
              lineStyle: {
                normal: {
                  color: "#ea3223", // 线条颜色
                  width: 2,
                },
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#ea3223",
                    },
                    formatter: "{c}%",
                  },
                },
              },
            },
          ],
        };

        myChart.setOption(option);
      });
    },
  },
};
</script>

<style>
</style>
